Render網頁

2019年10月22日 — 一直以為關於HTML 面試題會是最簡單的，後來才發現我大錯特錯。對於網頁如何解析(Parsing)、TCP 封包( packet ) 如何傳遞相關問題幾乎一問三不知。

簡單來說就是將你寫的程式碼轉成HTML，而依照渲染發生的時機與地點，可分成SSR、SSG、CSR、ISR 四種常見的網頁渲染模式。

2023年3月20日 — 在現代Web 開發中，網頁渲染是一個重要的議題，它關係到網站性能和SEO 排名。現在，有三種主要的網頁渲染方式：客戶端渲染(CSR)、服務器端渲染(SSR) ...

2023年6月18日 — Server Side Render (SSR) 是指頁面的渲染行為是瀏覽器解析伺服器端回傳的HTML 與CSS 後呈現內容的方式，由於這些資料都是在伺服器端就完成組合，因此這些 ...

瀏覽器渲染 · 增加、刪除、或改變DOM 節點 · 增加、刪除'class' 屬性值 · 元素尺寸改變 · 文本內容改變 · 瀏覽器窗口改變大小或拖動 · 動畫效果進行計算和改變CSS 屬性值 ...

Render tree 是另一個結合了DOM tree 以及CSSOM tree 產生的樹狀結構。瀏覽器會透過render tree 來計算layout（排版）並且將可視元素paint（繪圖）至畫面中。換句話說，在 ...

2020年12月10日 — 此篇主要是記錄學習網頁渲染的步驟，哪個元件做了哪些事等等，屬於篇基本面的紀錄. 在網頁渲染的過程中，主要有分幾個步驟，分別是DOM -> CSSOM ...

2016年11月27日 — 這篇教學簡介瀏覽器轉譯/渲染(Browser Rendering)的原理，如何使用Chrome DevTool找到效能瓶頸，以及如何避開導致效能瓶頸的作法。

2017年5月21日 — 為了使網頁可以盡快呈現，渲染引擎並不會等全部的HTML解析完才再去建構Rendering Tree，而是解析完一部分，就先顯示一部分的內容。並在顯示的同時，可能也 ...

2023年6月1日 — 伺服器渲染是指在用戶每次請求網頁時，伺服器都會重新生成網頁內容並回傳給用戶，由於頁面及時生成需要時間，因此伺服器渲染的網站通常會比靜態網站慢，但 ...